<div class="pm_grid no-padding no-margin datetimepicker">
    <div class="col-4-8">
        <div class="pm_select">
            <select class="day-selector always-show-ng-invalid"
                    ng-model="model.day"
                    ng-options="day.label for day in availableDays track by day.value"
                    ng-disabled="disableInput"
                    name="{{::datePickerKey}}" required>
                <option value="" disabled translate-context="Title" translate>Day of the month</option>
            </select>
            <i class="fa fa-angle-down"></i>
        </div>
    </div>
    <div class="col-4-8 timepicker-container">
        <time-picker class="timepicker" ng-model="model.time" data-event-key="{{ ::timePickerKey }}"></time-picker>
    </div>

    <div class="col-1-1 text-red" ng-messages="combineErrors()">
        <p ng-message="time_required" translate-context="Error input" translate>Please enter a valid time.</p>
        <p ng-message="date_required" translate-context="Error input" translate>Please enter a valid day in the month.</p>
        <p ng-message="both_required" translate-context="Error input" translate>Please enter a valid day in the month and time.</p>
    </div>
</div>
